<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>


<script type="text/javascript" src="Content/js/Lib/jquery-1.8.2.js"></script>
<script type="text/javascript" src="Content/js/Dangki/jquery.js"></script>
<script type="text/javascript" src="Content/js/Dangki/jquery.validate.js"></script>
<script type="text/javascript" src="Content/js/Dangki/jquery.validate.password.js"></script>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>

<link rel="stylesheet" type="text/css"
	href="Content/css/Register/index.css" />
<link rel="stylesheet" type="text/css"
	href="Content/css/Register/jquery.validate.password.css" />

<div class="container">
	<ul class="breadcrumb" style="margin-bottom: 10px;">
		<li><a href="home">Trang chủ</a> <span class="divider">/</span></li>
		<li class="active">Đăng ký tài khoản</li>
	</ul>
	<div class="menuleft">
		<div  class="my_menu" style="width:200px;">
        	<div class="header">Menu</div>
			<ul style="margin-top:0px;margin-bottom:2px;">
                <c:forEach var="menu" items="${requestScope.lMenu1 }">
					<li><a href="book.do?tpid=${ menu.topicId}&trang=1&slbooktt=${requestScope.soBookMacDinh}&kieuSort=${requestScope.kieuSapXep}"><c:out value="${menu.topicName }"></c:out></a></li>	
				</c:forEach>	                  
            </ul>
		</div>	
	
	</div>
	<div class="main_content">
		<div class="page-header-register">
			<h4>Tạo tài khoản mới</h4>
		</div>
		<div class="error-message" id="result-register" style="display:none;">
        	<p>Kiểm tra lại các thông tin đăng ký</p>
        </div>
		<p class="required" style="margin: 15px 0px 0px 0px;">* Các trường
			bắt buộc</p>
		<fieldset class="group-infor">
			<h4 class="legend">Thông tin cá nhân</h4>
			<ul class="nav">
				<li>
					<div class="input-box">
						<label class="strong">Họ và tên <span class="required">*</span></label>
						<input type="text" name="HoVaTen" id="HoVaTen" />
					</div>
				</li>
				<li>
					<div class="input-box">
						<label class="strong">Địa chỉ email <span class="required">*</span></label>
						<input type="email" name="Email" id="Email" style="float:left;"/>
						<div id="check-email" class="check-item"></div>
					</div>
				</li>
				<li>
					<div class="day-of-birth">
						<label><strong>Ngày tháng năm sinh</strong><span class="required"> *</span></label>
						<div class="input-box">
							<select id="Ngay" name="Ngay" style="width: 56px;">
								<option value="00" selected="selected">--</option>
								<option value="01">1</option>
								<option value="02">2</option>
								<option value="03">3</option>
								<option value="04">4</option>
								<option value="05">5</option>
								<option value="06">6</option>
								<option value="07">7</option>
								<option value="08">8</option>
								<option value="09">9</option>
								<option value="10">10</option>
								<option value="11">11</option>
								<option value="12">12</option>
								<option value="13">13</option>
								<option value="14">14</option>
								<option value="15">15</option>
								<option value="16">16</option>
								<option value="17">17</option>
								<option value="18">18</option>
								<option value="19">19</option>
								<option value="20">20</option>
								<option value="21">21</option>
								<option value="22">22</option>
								<option value="23">23</option>
								<option value="24">24</option>
								<option value="25">25</option>
								<option value="26">26</option>
								<option value="27">27</option>
								<option value="28">28</option>
								<option value="29">29</option>
								<option value="30">30</option>
								<option value="31">31</option>
							</select> <label class="label-dob">Ngày</label>
						</div>
						<div class="input-box">
							<select id="Thang" name="Thang" style="width: 56px;">
								<option value="00" selected="selected">--</option>
								<option value="01">1</option>
								<option value="02">2</option>
								<option value="03">3</option>
								<option value="04">4</option>
								<option value="05">5</option>
								<option value="06">6</option>
								<option value="07">7</option>
								<option value="08">8</option>
								<option value="09">9</option>
								<option value="10">10</option>
								<option value="11">11</option>
								<option value="12">12</option>
							</select> <label class="label-dob">Tháng</label>
						</div>
						<div class="input-box">
							<input type="text" style="width: 50px" name="Nam" id="Nam" onkeypress="return isNumberKey(event)"/> <label
								class="label-dob">Năm</label>
						</div>
					</div>
				</li>
				<li>
					<div class="input-box">
						<label class="strong">Địa chỉ liên lạc<span class="required"> *</span></label>
						<input type="text" name="DiaChi" id="DiaChi" style="float:left;"/>
					</div>
				</li>
				<li>
					<div class="input-box">
						<label class="strong">Số điện thoại liên lạc<span class="required"> *</span></label>
						<input type="text" name="DienThoai" id="DienThoai" style="float:left;" onkeypress="return isNumberKey(event)"/>
						<div id="check-phone" class="check-item"></div>
					</div>
				</li>
			</ul>
		</fieldset>
		<fieldset class="group-infor">
			<h4 class="legend">Thông tin tài khoản</h4>
			<ul class="nav">
				<li>
					<div class="input-box">
						<label class="strong">Tên đăng nhập <span class="required">*</span></label>
						<input type="text" name="TenDangNhap" id="TenDangNhap" style="float:left;"/>
						<div id="check-username" class="check-item"></div>
					</div>
				</li>
				<li>
				<form id="register">
					<div class="input-box">
						<label class="strong">Mật khẩu <span class="required">*</span></label>
						<input type="password" name="MatKhau" id="MatKhau"  onkeyup="passwordStrength(this.value)" style="float:left;"/>
						<div class="strength-password">
							<div id="passwordDescription">&nbsp;</div>
							<div id="passwordStrength" class="strength0"></div>
						</div>
					</div>
					</form>
				</li>
				<li>
					<div class="input-box">
						<label class="strong">Xác nhận mật khẩu <span
							class="required">*</span></label> 
							<input type="password"
							name="XacNhanMatKhau" id="XacNhanMatKhau" style="float:left;"/>
						<div id="check-confirm-password"  class="check-item"></div>
					</div>
				</li>
			</ul>
		</fieldset>
		<fieldset class="group-infor">
			<form id="captcha-form" action="KiemTraCaptcha.do" method="post">
			<h4 class="legend">Mã kiểm tra</h4>
			<p style="font-size: 8pt; color: #888;">Giúp chứng minh bạn không
				phải là người máy tự động.</p>
			<div class="fieldValue" id="fieldValueCaptchar">${captchar.createRecaptchaHtml(null, null)}</div>
			<div id="check-captcha"  class="check-item"></div>
			</form>
		</fieldset>
		<button id="btn-register" class="btn btn-primary">Tạo tài khoản</button>
	 </div>
</div>


<script>
	var flagEmail = false;
	var flagPhone = false;
	var flagUserName = false;
	var flagConfirmPassword = false;
	var flagCaptchar = false;
	function passwordStrength(password)
	{
		var desc = new Array();
		desc[0] = "Rất yếu";
		desc[1] = "Yếu";
		desc[2] = "Chưa tốt";
		desc[3] = "Gần tốt";
		desc[4] = "Tốt";
		desc[5] = "Rất tốt";
	
		var score   = 0;
	
		//if password bigger than 6 give 1 point
		if (password.length > 6) score++;
	
		//if password has both lower and uppercase characters give 1 point	
		if ( ( password.match(/[a-z]/) ) && ( password.match(/[A-Z]/) ) ) score++;
	
		//if password has at least one number give 1 point
		if (password.match(/\d+/)) score++;
	
		//if password has at least one special caracther give 1 point
		if ( password.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/) )	score++;
	
		//if password bigger than 12 give another 1 point
		if (password.length > 12) score++;
	
		 document.getElementById("passwordDescription").innerHTML = desc[score];
		 document.getElementById("passwordStrength").className = "strength" + score;
	}
	function validateEmail(sEmail) {
	    var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
	    if (filter.test(sEmail)) {
	        return true;
	    }
	    else {
	        return false;
	    }
	}
	function isNumberKey(evt)
    {
       var charCode = (evt.which) ? evt.which : event.keyCode;
       if (charCode != 46 && charCode > 31 && (charCode<48 || charCode>57))
          return false;
      
       return true;
    }
	$('#XacNhanMatKhau').keyup(function(){
		if($('#XacNhanMatKhau').val() != "")
		{
			if($('#XacNhanMatKhau').val() != $('#MatKhau').val())
				{
				$("#check-confirm-password").css("color", "red");
    			$("#check-confirm-password").html('<img src="Content/images/Register/error_msg_icon.gif" /> Xác nhận mật khẩu không đúng');
    			flagConfirmPassword = false;
				}
			else{
				$("#check-confirm-password").css("color", "green");
        		$("#check-confirm-password").html('<img src="Content/images/Register/accepted.png" />');
        		flagConfirmPassword = true;
			}
		}
	});
	$('#TenDangNhap').change(function(){
		if($('#TenDangNhap').val() == "")
		{
			flagUserName = false;
			return false;
		}
		$("#check-username").html('<img src="Content/images/Register/loader.gif" /> Đang kiểm tra ...');
		var username = $('#TenDangNhap').val();
		$.ajax({
	        type: "GET",
	        datetype: "html",
	        url: "KiemTraTenDangNhap.do",
	        data: "username=" + username,
	        async: false,
	        success: function(response){
	        	if(response == "success")
	        		{
	        		$("#check-username").css("color", "red");
        			$("#check-username").html('<img src="Content/images/Register/error_msg_icon.gif" /> Tên đăng ký đã tồn tại. Vui lòng chọn tên khác');
        			flagUserName = false;
	        		}
	        	else
	        		{
		        		
	        			$("#check-username").css("color", "green");
		        		$("#check-username").html('<img src="Content/images/Register/accepted.png" /> Có thể dùng được');
		        		flagUserName = true;
	        		}
	        },
	         error: function(e){
	             alert('Error: ' + e);
	             $("#check-username").css("color", "red");
     			 $("#check-username").html('<img src="Content/images/Register/error_msg_icon.gif" /> Tên đăng ký đã tồn tại. Vui lòng chọn tên khác');
	         }
	    });
	});
	$('#HoVaTen').change(function(){
		if($(this).val() != "")
			{
				$('#HoVaTen').css("background-color", "white");
			}
	});
	$('#Email').change(function(){
		if($(this).val() != "")
			{
				$('#Email').css("background-color", "white");
				var sEmail = $('#Email').val();
		        if ($.trim(sEmail).length == 0) {
		        	$("#check-email").css("color", "red");
        			$("#check-email").html('<img src="Content/images/Register/error_msg_icon.gif" /> Vui lòng điền đúng email');
        			flagEmail = false;
		            e.preventDefault();
		        }
		        if (validateEmail(sEmail)) {
		        	$("#check-email").css("color", "red");
        			$("#check-email").html('');
        			flagEmail = true;
        			
        			$("#check-email").html('<img src="Content/images/Register/loader.gif" /> Đang kiểm tra ...');
        			var email = $('#Email').val();
        			$.ajax({
        		        type: "GET",
        		        datetype: "html",
        		        url: "KiemTraEmail.do",
        		        data: "email=" + email,
        		        async: false,
        		        success: function(response){
        		        	if(response == "exist")
        		        		{
        			        		$("#check-email").css("color", "red");
        		        			$("#check-email").html('<img src="Content/images/Register/error_msg_icon.gif" /> Email đã được đăng ký. Vui lòng chọn email khác');
        		        			flagEmail = false;
        		        		}
        		        	else
        		        		{
	        		        		$("#check-email").css("color", "green");
	    			        		$("#check-email").html('<img src="Content/images/Register/accepted.png" /> Có thể dùng được');
	    			        		flagEmail = true;
        		        		}
        		        },
        		         error: function(e){
        		             alert('Error: ' + e);
        		             $("#check-email").css("color", "red");
 		        			$("#check-email").html('<img src="Content/images/Register/error_msg_icon.gif" /> Email đã được đăng ký. Vui lòng chọn email khác');
 		        			flagEmail = false;
        		         }
        		    });
		        }
		        else {
		        	$("#check-email").css("color", "red");
        			$("#check-email").html('<img src="Content/images/Register/error_msg_icon.gif" /> Vui lòng điền đúng email');
        			flagEmail = false;
		            e.preventDefault();
		        }
			}
	});
	$('#Ngay').change(function(){
		if($(this).val() != "00")
			{
				$('#Ngay').css("background-color", "white");
			}
	});
	$('#Thang').change(function(){
		if($(this).val() != "00")
			{
				$('#Thang').css("background-color", "white");
			}
	});
	$('#Nam').change(function(){
		if($(this).val() != "")
			{
				$('#Nam').css("background-color", "white");
			}
	});
	$('#DiaChi').change(function(){
		if($(this).val() != "")
			{
				$('#DiaChi').css("background-color", "white");
			}
	});
	$('#DienThoai').change(function(){
		if($(this).val() != "")
			{
				$('#DienThoai').css("background-color", "white");
			}
	});
	$('#TenDangNhap').change(function(){
		if($(this).val() != "")
			{
				$('#TenDangNhap').css("background-color", "white");
			}
	});
	$('#MatKhau').change(function(){
		if($(this).val() != "")
			{
				$('#MatKhau').css("background-color", "white");
			}
	});
	
	$('#btn-register').click(function(){
		if($('#HoVaTen').val() == "")
		{
			$('#HoVaTen').focus();
			$('#HoVaTen').css("background-color", "#FD9FB9");
			$('#result-register').css("display", "block");
			return false;
		}
		if($('#Email').val() == "")
		{
			$('#Email').focus();
			$('#Email').css("background-color", "#FD9FB9");
			$('#result-register').css("display", "block");
			return false;
		}
		if($('#Ngay').val() == "00")
		{
			$('#Ngay').focus();
			$('#Ngay').css("background-color", "#FD9FB9");
			$('#result-register').css("display", "block");
			return false;
		}
		if($('#Thang').val() == "00")
		{
			$('#Thang').focus();
			$('#Thang').css("background-color", "#FD9FB9");
			$('#result-register').css("display", "block");
			return false;
		}
		if($('#Nam').val() == "")
		{
			$('#Nam').focus();
			$('#Nam').css("background-color", "#FD9FB9");
			$('#result-register').css("display", "block");
			return false;
		}
		if($('#DiaChi').val() == "")
		{
			$('#DiaChi').focus();
			$('#DiaChi').css("background-color", "#FD9FB9");
			$('#result-register').css("display", "block");
			return false;
		}
		if($('#DienThoai').val() == "")
		{
			$('#DienThoai').focus();
			$('#DienThoai').css("background-color", "#FD9FB9");
			$('#result-register').css("display", "block");
			return false;
		}
		else
		{
			var x=$('#DienThoai').val();
			if ((x.match(/^\d{11}/)) || ((x.match(/^\d{10}/))))
			{
				$("#check-phone").css("color", "red");
    			$("#check-phone").html('');
    			flagPhone = true;
			}
			else
			{
				$("#check-phone").css("color", "red");
    			$("#check-phone").html('<img src="Content/images/Register/error_msg_icon.gif" /> Xin vui lòng kiểm tra lại số điện thoại của bạn (10 - 11 chữ số)');
    			$('#result-register').css("display", "block");
    			flagPhone = false;
				return false;
			}
		}
		if($('#TenDangNhap').val() == "")
		{
			$('#TenDangNhap').focus();
			$('#TenDangNhap').css("background-color", "#FD9FB9");
			$('#result-register').css("display", "block");
			return false;
		}
		if($('#MatKhau').val() == "")
		{
			$('#MatKhau').focus();
			$('#MatKhau').css("background-color", "#FD9FB9");
			$('#result-register').css("display", "block");
			return false;
		}
		if(flagEmail && flagUserName && flagConfirmPassword && flagPhone)
		{
			var myForm = $('#captcha-form');
			$('#main-loader').css("display", "block");
			$.ajax({
				type: myForm.attr('method'),
		        datetype: "html",
		        url: myForm.attr('action'),
		        data: myForm.serialize(),
		        async: false,
		        success: function(response){
		        	if(response == "correct")
		        		{
							flagCaptchar = true;
		        		}
		        	else
		        		{
		        			$('MatKhau').val("");
		        			$('XacNhanMatKhau').val("");
			        		$('#result-register').css("display", "block");
			        		$("#check-captcha").css("color", "red");
		        			$("#check-captcha").html('<img src="Content/images/Register/error_msg_icon.gif" /> Sai captcha');
		        			Recaptcha.reload();
		        			flagCaptchar = false;
		        		}
		        	
		        },
		         error: function(e){
		             alert('Error: ' + e);
		             $('#result-register').css("display", "block");
		         }
		    });
		}
		if (flagCaptchar)
		{
			var hoVaTen = $('#HoVaTen').val();
			var ngay = $('#Ngay').val();
			var thang = $('#Thang').val();
			var nam = $('#Nam').val();
			var diaChi = $('#DiaChi').val();
			var email = $('#Email').val();
			var dienThoai = $('#DienThoai').val();
			var tenDangNhap = $('#TenDangNhap').val();
			var matKhau = $('#MatKhau').val();
			
			var dataPackage = "HoVaTen=" + hoVaTen + "&Ngay=" + ngay + "&Thang=" + thang + "&Nam=" + nam
			+ "&DiaChi=" + diaChi + "&Email=" + email + "&DienThoai=" + dienThoai + "&TenDangNhap=" + tenDangNhap
			+ "&MatKhau=" + matKhau;
			
			$.ajax({
		        type: "POST",
		        datetype: "html",
		        url: "DangKi.do",
		        data: dataPackage,
		        async: false,
		        success: function(response){
		        	if(response == "success")
		        		{
			        		var delay = 0; //Your delay in milliseconds
			        		setTimeout(function(){ window.location = 'home'; }, delay);
		        		}
		        	else
		        		{
		        			$('#main-loader').css("display", "none");
		        			alert('Quá trình đăng ký gặp lỗi. Vui lòng thử lại sau');
		        		}
		        	
		        },
		         error: function(e){
		        	 alert('Quá trình đăng ký gặp lỗi. Vui lòng thử lại sau');
		         }
		    });			
		}
		$('#main-loader').css("display", "none");
	});

	
	
</script>